<template>
  <div class="flex-wrap" style="background-color: white; height: 100%">
    <div class="flexAlignCenter" style="background: #f7f7f7">
      <el-button type="info" style="margin-right: 20px" @click="back"
        >返回</el-button
      >
      用户信息
    </div>
    <section>
      <div class="left">
        <el-avatar :size="60" :src="info.avatar" />
      </div>
      <div class="right">
        <h1>{{ info.userName }}</h1>
        <el-row>
          <el-col :span="7">手机号：{{ info.phone }}</el-col>
          <el-col :span="7"
            >会员：{{ userVip.names[info.memberStatus] }}</el-col
          >
          <el-col :span="7">最近登录时间：{{ info.lastAccessTime }}</el-col>
          <el-col :span="3">
            <el-button type="info" size="small" @click="handleBatchBan"
              >封禁</el-button
            >
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="7">注册时间：{{ info.enrollTime || '-' }}</el-col>
          <el-col :span="7">到期时间：{{ info.expireTime }}</el-col>
          <el-col :span="7"
            >最近登录地址：{{ info.lastAccessAddress || '-' }}</el-col
          >
        </el-row>
        <el-row>
          <el-col :span="7">账号状态：{{ getStatusLabel(info.status) }}</el-col>
          <el-col :span="7"></el-col>
          <el-col :span="7">常用设备：{{ info.deviceModel || '-' }}</el-col>
        </el-row>
        <div class="bottom">
          <h2>用户操作日志</h2>
          <el-timeline style="margin-top: 20px">
            <el-timeline-item
              v-for="(activity, index) in info.userOperationLogs"
              :key="index"
              :icon="activity.icon"
              :type="activity.type"
              :color="activity.color"
              :size="activity.size"
              :hollow="activity.hollow"
              :timestamp="activity.operationTime"
            >
              {{ activity.operationText }}
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { getUserDetail, batchBanUsers } from '@/api/user';
import { ElMessage } from 'element-plus';

import { useDictStore } from '@/store/dict';

const dictStore = useDictStore();
const { userVip, online } = dictStore;

// 路由
const router = useRouter();
const route = useRoute();

const activities = ref([]);
const info = ref({});

// 状态选项
const getStatusLabel = (status) => {
  const statusItem = online.consts.find((item) => item.value === status);
  return statusItem ? statusItem.label : '未知';
};

const handleBatchBan = async () => {
  batchBanUsers([info.value.sessionId]).then(() => {
    ElMessage({
      type: 'success',
      message: '封禁成功',
    });
    back();
  });
};

// 初始加载数据
onMounted(() => {
  getUserDetail(route.query.id)
    .then(({ data }) => {
      console.log(data);
      info.value = data;
    })
    .finally(() => {});
});

const back = () => {
  router.back();
};
</script>

<style lang="less" scoped>
section {
  margin-top: 20px;
  padding: 10px;
  display: flex;
  .left {
    width: 80px;
  }
  .right {
    flex: 1;
    .bottom {
      border-top: 4px solid #fcfcfc;
      padding-top: 20px;
      margin-top: 20px;
    }
  }
}
.el-row {
  margin-top: 20px;
  align-items: center;
  height: 24px;
}
</style>
